<template>
  <div class="r_flex CityInput">
    <el-cascader
      clearable
      v-model="cityModel"
      :options="cityData"
      :props="{ expandTrigger: 'hover' }"
      :show-all-levels="false"
      @change="cityChange">
    </el-cascader>
  </div>
</template>

<script>
import { cityList, cityTree } from '@/api/business/city'

export default {
  name: 'CityInput',
  props: {
    // 城市 - 单选/多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 城市 - input宽度100%/宽度默认
    width100: {
      type: Boolean,
      default: false
    },
    // 全选
    allchecked: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      cityData: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
        }],
      }],
      cityKey: '',
      cityModel: '',
    }
  },
  created() {
    // 拉取城市数据
    this.getList()
  },
  mounted() {

  },
  methods: {
    /** 查询城市数据 */
    getList() {
      this.loading = true
      cityTree().then(response => {
        let newparm = []
        let newcity = []
        for (const key in response.data) {
          const data = response.data[key];
          newcity = { label: key, value: key, children: [] }
          data.map((son, i)=>{
            newcity.children.push({label: son.cname, cname: son.cname, value: son.ccode, ccode: son.ccode, cprovince: son.cprovince, cpinyin: son.cpinyin })
          })
          newparm.push(newcity)
        }
        this.cityData = newparm
      })
    },
    // 选择城市后
    cityChange(data) {
      let newparm = ''
      newparm = this.cityData.map((keyID) => keyID.children.filter((value) => { if (this.cityModel[1] == value.value) { return value } })[0])
      newparm = newparm.filter(newd=>newd)
      this.$emit('selectCity', newparm)
    }
  }
}
</script>

<style lang="scss">

.Upimg {
  .upThemeOne {
    width: 100px;
    height: 150px;
    border-radius: 5px;
    border: 1px dashed #dfe6ec;
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
    }
  }
  .el-upload-list {
    display: none;
  }
  .up_img{
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 150px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #dfe6ec;
    margin-right: 10px;
    img{
      width: 100%;
    }
    .del_img{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
    }
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
      .del_img{
        display: flex;
      }
    }
  }
}
</style>
